<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>元素尺寸</title>
		<style>

			* {
				padding: 0;
				margin: 0;
			}

			.box {
				width: 400px;
				height: 400px;
				border: 5px solid black;
				background-color: yellow;
				margin: 50px auto;
				/*position: relative;*/
			}

			.in {
				width: 100px;
				height: 200px;
				border: 20px solid red;
				background-color: black;
				padding: 50px;
				margin: 20px 0 0 30px;
			}

			.a {
				width: 200px;
				height: 200px;
				border: 10px solid black;
				margin: 50px auto 0;
				overflow: auto;
				padding-top: 50px;
			}

			.b {
				width: 500px;
				height: 100px;
				background-color: pink;
			}

		</style>
	</head>
	<body>

		<div class="box">
			<div class="in"></div>
		</div>

		<div class="a">
			<div class="b"></div>
		</div>
		
	</body>
</html>
<script>
	
	// 如何获取元素尺寸?
	// 获取boxDiv元素
	var boxDiv = document.getElementsByClassName('box')[0];

	// 获取全局样式的width
	var width = getComputedStyle(boxDiv, null).width;

	// parseInt从字符串开始位置中解析出来整型数字
	console.log(parseInt(width));


	console.log(parseInt("543ABC"));
	console.log(parseInt("ABC543"));
	console.log(parseInt("543AB321"));

	console.log(parseInt("123.215AB"));

	// parseFloat从字符串的开始位置中解析出来浮点型数字(小数)
	console.log(parseFloat("123.215AB"));


	// js中获取元素尺寸的方法
	// 获取in元素
	var inDiv = document.querySelector('.in');

	// 内尺寸, padding+content
	console.log(inDiv.clientWidth);
	console.log(inDiv.clientHeight);

	// 上边框的宽度
	console.log(inDiv.clientTop);

	// 左边框的宽度
	console.log(inDiv.clientLeft);


	// 外尺寸
	// content + padding + border
	console.log(inDiv.offsetWidth);
	console.log(inDiv.offsetHeight);

	// offsetTop 元素的上外边框距离offsetParent的上内边框的距离
	console.log(inDiv.offsetTop);

	// offsetLeft 元素的左外边框距离offsetParent的左内边框的距离
	console.log(inDiv.offsetLeft);

	// offsetParent 距离该元素最近的具有定位样式的父辈元素(position的值不能为static), 祖宗是body
	console.log(inDiv.offsetParent);


	// 滚动尺寸
	// 获取第一个class为a的div元素
	var aDiv = document.querySelector('div.a');
	aDiv.onclick = function() {
		// 垂直滚动尺寸
		console.log(aDiv.scrollTop);
		// scrollHeight : 元素的内尺寸(clientHeight) + 溢出的内容
		console.log(aDiv.scrollHeight);

		// 水平滚动尺寸
		console.log(aDiv.scrollLeft);
		// scrollWidth: 元素的内尺寸(clientWidth) + 溢出的内容
		console.log(aDiv.scrollWidth);
	};



</script>






